<template>
	<view class="contenter-bg">
		<image :src="imgUrl + vote.image" v-if="vote.image" mode="widthFix" style="width: 100%;"
			@click="link(vote.link)" />

		<view style="padding: 20rpx 30rpx">
			<view class="vote-top">
				<view class="vote-detail">
					<view class="vode-d-cont">
						<view class="option">{{ vote.btn_txt||'投票' }}项</view>
						<view class="dots">{{ vote.person_count || 0 }}</view>
					</view>
					<view class="vode-d-cont">
						<view class="option">总{{ vote.btn_txt||'投票' }}数</view>
						<view class="dots">{{ vote.count || 0 }}</view>
					</view>
					<view class="vode-d-cont">
						<view class="option">总访问数</view>
						<view class="dots">{{ vote.hit || 0 }}</view>
					</view>
				</view>
				<view class="endTime-box">
					<u-count-down :time="vote.down_time" format="DD:HH:mm:ss" @change="onChange"
						v-if="vote.down_time > 0 && timeData">
						<view class="count-time">
							<image :src="require('../static/img/sheji/time.png')" class="vote_border" />
							距离活动结束还有
							<text>{{ timeData.days }}</text>
							天
							<text>{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
							时
							<text>{{ timeData.minutes }}</text>
							分
							<text>{{ timeData.seconds }}</text>
							秒
						</view>
					</u-count-down>
					<u-text text="活动已结束" align="center" lineHeight="70" v-else></u-text>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<ad :unit-id="ad.vote_index" v-if="ad.vote_index" ad-intervals="30" style="margin-top: 10px;"></ad>
			<!-- #endif -->
			<view class="search">
				<input type="text" placeholder="请输入编号或者名称" v-model="keyword" />
				<view @click.stop="serch">搜索</view>
			</view>

			<u-grid :border="true" col="4" v-if="vote.groups && vote.groups.length > 0"
				customStyle="margin-top:20px;border:1px solid #ddd;border-radius:5px;">
				<u-grid-item @click="select_group(-1)"><text class="grid-text"
						:class="group_id == -1 ? 'grid-text-active' : ''">全部</text></u-grid-item>
				<u-grid-item v-for="(item, index) in vote.groups" :key="index" @click="select_group(item.id)">
					<text class="grid-text"
						:class="group_id == item.id ? 'grid-text-active' : ''">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>

			<u-row customStyle="margin-top: 20px" gutter="10" align="top">
				<u-col span="6" align="top">
					<view class="person" v-for="(item, index) in person" :key="index" v-if="index % 2 == 0"
						@click="goto('/pages/vote/person?person_id='+item.id)">
						<view class="person_code">{{ item.code }}</view>
						<image class="person_image" :src="imgUrl + item.image" mode="widthFix"></image>
						<view class="person_footer">
							<u-text :text="item.name" lines="2" lineHeight="30" align="center" size="14"></u-text>
							<text class="count">{{item.count}}票</text>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="person" v-for="(item, index) in person" :key="index" v-if="index % 2 != 0"
						@click="goto('/pages/vote/person?person_id='+item.id)">
						<view class="person_code">{{ item.code }}</view>
						<image class="person_image" :src="imgUrl + item.image" mode="widthFix"></image>
						<view class="person_footer">
							<u-text :text="item.name" lines="2" lineHeight="30" align="center" size="14"></u-text>
							<text class="count">{{item.count}}票</text>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				ad: 'common/ad',
				color: 'common/color',
				color_value: 'common/color_value',
			})
		},
		name: 'temp-sheji',
		props: {
			vote: {
				type: Object,
				default: null
			},
			person: {
				type: Array,
				default: null
			}
		},
		data() {
			return {
				timeData: {},
				group_id: -1,
				keyword: '',
			};
		},
		mounted() {},
		watch: {
			person(person) {
				if (person) {
					this.person = person;
				}
			}
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			link(link) {
				this.utils.link(link);
			},
			select_group(group_id) {
				this.group_id = group_id;
				this.$emit('updateData', {
					group_id: group_id
				});
			},
			serch() {
				this.$emit('updateData', {
					keyword: this.keyword
				});
			},
			goto(url) {
				this.utils.goto(url)
			}
		}
	};
</script>
<style lang="scss">
	.contenter-bg {
		width: 750rpx;
		min-height: 100vh;
		height: 100%;
		background-color: #fee8d0;
	}

	.vote-top{
		border: 1px solid #A36A00;
		background-color: #fff;
		font-size: 14px;
		text-align: center;
		border-radius: 5px;
		
		.vote-detail {
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
		
			.vode-d-cont {
				z-index: 4;
				display: inline-block;
				width: 33.3%;
				height: 80px;
				position: relative;
				padding-top: 5px;
				background-image: url('../static/img/sheji/vote-detail.png');
				background-repeat: no-repeat;
				background-size: 80% 28px;
				background-position: 50% 0;
		
				.option {
					color: #fff;
				}
		
				.dots {
					font-size: 24px;
					color: #402600;
					margin-top: 20px;
				}
		
			}
		}
		
		.endTime-box {
			width: 80%;
			height: 60px;
			line-height: 60px;
			border-top: 1px solid #A36A00;
			margin: 0 auto;
		
			.count-time text {
				color: #FF4E3E;
				padding: 0 3px;
			}
		}
	}
	
	.search {
		width: 100%;
		height: 40px;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
		overflow: hidden;
		margin-top: 15px;
		background-color: #fff;
		font-size: 14px;

		input {
			width: calc(100% - 80px);
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			height: auto;
			padding-left: 10px;
		}

		view {
			width: 80px;
			height: 40px;
			line-height: 38px;
			text-align: center;
			color: #fff;
			border-bottom-right-radius: 5px;
			background: linear-gradient(-180deg, #F45334 0%, #FB2C05 100%);
		}
	}

	.grid-text {
		height: 64rpx;
		line-height: 64rpx;
		background-color: #fff;
		color: #666666;
		font-size: 12px;
		text-align: center;
		width: 100%;
	}

	.grid-text-active {
		background: linear-gradient(-180deg, #F45334 0%, #FB2C05 100%);
		color: #fff;
	}
	
	.vote_border {
		display: inline-block;
		width: 16px;
		height: 15px;
		margin-right: 5px;
		margin-top: -2px;
		vertical-align:middle;
	}

	/* 选手 */
	.person {
		width: 100%;
		border-radius: 16rpx;
		background: #fff;
		margin-bottom: 20px;
		position: relative;
		border: 1px solid #A36A00;

		.person_code {
			height: 30px;
			background-image: url('../static/img/sheji/vote-detail.png');
			background-repeat: no-repeat;
			background-size: 50% 25px;
			background-position: 50% 0;
			color: #fff;
			text-align: center;
		}

		.person_image {
			display: block;
			width: 100%;
		}

		.person_footer {
			padding: 5px 10px 10px;
			text-align: center;
			font-size: 14px;
			
			.count{
				background: linear-gradient(-180deg, #F45334 0%, #FB2C05 100%);
				padding: 5px 15px;
				border-radius: 15px;
				color: #fff;
				display: block;
			}
		}
	}
</style>
